<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter="20" style="padding-left: 20px">
      <el-col :span="3">
        <el-input
          placeholder="请输入公司"
          v-model="queryForm.query.company"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-input
          placeholder="请输入部门"
          v-model="queryForm.query.department"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-input
          placeholder="请输入名称"
          v-model="queryForm.query.name"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="search()">搜索</el-button>
        <el-button plain @click="clearSearchData()">重置</el-button>
      </el-col>
      <el-col
        :span="4"
        style="float: right; text-align: right; padding-right: 30px"
      >
        <el-button type="hawkCreate" @click="editRow()">创建虚拟机</el-button>
        <el-button plain>导入</el-button>
      </el-col>
    </el-row>
    <hawk-table
      :table-data="tableData"
      @selectionChange="handleSelectionChange"
      :options='[
        { key: "tname", label: "服务器名称" },
        { key: "tcompany", label: "所属公司" },
        { key: "tdepartment", label: "所属部门" },
        { key: "tip", label: "IP地址", width:"150" },
        { key: "tgateway", label: "网关", width:"150" },
        { key: "tsubnet", label: "子网" },
        { key: "tsoftware", label: "运行软件" },
        { key: "tstatus", label: "服务器状态" },
        {key:"handle",label:"操作"}
    ]'>
      <template #tstatus="{ row }">
        <span style="color:green" v-if="row.tstatus == 1">开启</span>
        <span style="color:red" v-else>关闭</span>
      </template>
      <template #handle="{ row }">
        <span class="hawk-text-btn" @click="editRow(row)">编辑</span>
        <span class="hawk-text-divider">|</span>
        <span class="hawk-text-btn" @click="deleteRow(row)">删除</span>
        <span class="hawk-text-divider">|</span>
        <span class="hawk-text-btn" @click="editRow(row,1)">查看</span>
      </template>
    </hawk-table>
    <div class="bottom-btns">
      <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          {{ multipleSelection.length }} 选择
        </div>
        <el-button type="hawkDelete" @click="batchDelete()">批量删除</el-button>
        <el-button plain>导出</el-button>
      </div>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="queryForm.page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryForm.page.size"
        layout=" prev, pager, next,sizes"
        :total="total"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="formTitle"
      :visible.sync="addDialogVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="addDialogClosed"
    >
      <!-- 内容主题区 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="名称" prop="tname">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tname"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="tmodel">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tmodel"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="tcompany">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tcompany"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="tdepartment">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tdepartment"></el-input>
        </el-form-item>
        <el-form-item label="操作系统" prop="tsystem">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tsystem"></el-input>
        </el-form-item>
        <el-form-item label="CPU" prop="tcpu">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tcpu"></el-input>
        </el-form-item>
        <el-form-item label="内存" prop="tmemory">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tmemory"></el-input>
        </el-form-item>
        <el-form-item label="硬盘" prop="tdisk">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tdisk"></el-input>
        </el-form-item>
        <el-form-item label="IP地址" prop="tip">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tip"></el-input>
        </el-form-item>
        <el-form-item label="网关" prop="tgateway">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tgateway"></el-input>
        </el-form-item>
        <el-form-item label="子网" prop="tsubnet">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tsubnet"></el-input>
        </el-form-item>
        <el-form-item label="业务系统" prop="tbusiness">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tbusiness"></el-input>
        </el-form-item>
        <el-form-item label="运行软件" prop="tsoftware">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.tsoftware"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="tstatus">
          <el-switch
            :disabled='formTitle == "查看服务器"'
            v-model="addForm.tstatus"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="所处位置" prop="taddress">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.taddress"></el-input>
        </el-form-item>
        <el-form-item label="采购日期" prop="tcreateDate">
          <el-date-picker
            :readonly='formTitle == "查看服务器"'
            v-model="addForm.tcreateDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="质保时间" prop="twarrantyDate">
          <el-input :readonly='formTitle == "查看服务器"' v-model="addForm.twarrantyDate"  placeholder="1年"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button v-if='formTitle != "查看服务器"' type="primary" @click="saveData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @author 罗冲
 * @description 虚拟机组件视图层
 * @api /cmdb-servers
 * @since 2021-10-11 09:00
 * @update 2021-10-12 16:40
 * @modifier 罗冲
 * @bug 优化表格显示 增加查看功能
 * @version v1.0.0
 */
import HawkBreadcrumb from '@/components/breadcrumb/Breadcrumb'
import HawkTable from '@/components/table'
import { getList, doAdd, doEdit, doDelete,batchDelete, search } from '@/api/assets/list/servers'
export default {
  components: { HawkBreadcrumb, HawkTable },
  data() {
    return {
      // 增加/编辑  表单标题
      formTitle: '',
      addDialogVisible: false,
      // 表单数据
      addForm: {
        tname: '',
        tmodel: '',
        tcompany: '',
        tdepartment: '',
        tsystem: '',
        tcpu: '',
        tmemory: '',
        tdisk: '',
        tip: '',
        tgateway: '',
        tsubnet: '',
        tbusiness: '',
        tsoftware: '',
        tstatus: "1",
        taddress: '',
        tcreateDate:'',
        twarrantyDate: ''
      },
      // 表单验证
      addFormRules: {
        tname: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        tmodel: [{ required: true, message: '请输入规格', trigger: 'blur' }],
        tcompany: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
        tdepartment: [{ required: true, message: '请输入所属部门', trigger: 'blur' }],
        tsystem: [{ required: true, message: '请输入操作系统', trigger: 'blur' }],
        tcpu: [{ required: true, message: '请输入CPU', trigger: 'blur' }],
        tmemory: [{ required: true, message: '请输入内存', trigger: 'blur' }],
        tdisk: [{ required: true, message: '请输入硬盘', trigger: 'blur' }],
        tip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
        tgateway: [{ required: true, message: '请输入网关', trigger: 'blur' }],
        tsubnet: [{ required: true, message: '请输入子网', trigger: 'blur' }],
        tbusiness: [{ required: true, message: '请输入业务系统', trigger: 'blur' }],
        tsoftware: [{ required: true, message: '请输入运行软件', trigger: 'blur' }],
        taddress: [{ required: true, message: '请输入所处位置', trigger: 'blur' }],
        tcreateDate: [{ required: true, message: '请输入采购日期', trigger: 'blur' }],
        twarrantyDate: [{ required: true, message: '请输入质保日期', trigger: 'blur' }],
      },
      tableData: [],
      multipleSelection: [],
      queryForm: {
        query: {
          company: '',
          department: '',
          name: ''
        },
        page: {
          current: 1,
          size: 10,
        },
      },
      total: 0,
    }
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await getList(
        this.queryForm.page.current,
        this.queryForm.page.size
      )
      this.total = res.count
      this.tableData = res.list
    },
    // 编辑
    editRow(row,type) {
      if (!row) {
        this.formTitle = '添加服务器'
      } else {
        if(type){
          this.formTitle = '查看服务器'
          this.addForm = Object.assign({}, row)
        }else{
          this.formTitle = '修改服务器'
          this.addForm = Object.assign({}, row)
        }
      }
      console.log(this.addForm)
      this.addDialogVisible = true
    },
    // 删除
    deleteRow(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
          doDelete(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          if (this.tableData.length == 1) {
            this.queryForm.page.current -= 1
            if (this.queryForm.page.current < 1) {
              this.queryForm.page.current = 1
            }
          }
          this.getDataList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 批量删除
    batchDelete(){
      if(this.multipleSelection.length < 1){
        this.$message({
          type: 'warning',
          message: '请选择需要删除的数据'
        });
        return;
      }else{
        this.$confirm('此操作将永久删除所选数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          let list = [];
          for(let i = 0; i <this.multipleSelection.length; i++){
            list.push(this.multipleSelection[i].id)
          }
          batchDelete(list);
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          if(this.multipleSelection.length == this.tableData.length){
            this.queryForm.page.current -=1;
            if(this.queryForm.page.current<1){
              this.queryForm.page.current = 1;
            }
          }
          this.getDataList();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
      }
    },
    // 搜索
    async search() {
      if(this.queryForm.query.company=='' && this.queryForm.query.department == '' && this.queryForm.query.name == ''){
        this.$message({
          type: 'warning',
          message: '请输入搜索信息！',
        })
        return;
      }
      const res = await search(this.queryForm.query.company,this.queryForm.query.department,this.queryForm.query.name);
      console.log(res);
      this.tableData = res;
      this.total = res.length;
      this.queryForm.page.current = 1;
      this.queryForm.page.size = res.length;
    },
    // 清空搜索信息
    clearSearchData() {
      this.queryForm = this.$options.data().queryForm;
      this.getDataList();
    },
    // 多选
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 每页数量修改
    handleSizeChange(val) {
      console.log(val)
      this.queryForm.page.size = val
      this.getDataList()
    },
    // 页码跳转
    handleCurrentChange(val) {
      console.log(val)
      this.queryForm.page.current = val
      this.getDataList()
    },
    // 关闭弹窗
    addDialogClosed() {
      this.addForm = this.$options.data().addForm;
      this.$refs.addFormRef.resetFields();    //重置表单校验方法
      this.addDialogVisible = false;
    },
    // 提交表单
    saveData() {
      console.log(this.addForm);
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        if (this.addForm.id) {
          await doEdit(this.addForm)
        } else {
          await doAdd(this.addForm)
        }
        this.addDialogVisible = false
        this.getDataList()
      })
    },
  },
  created() {
    this.getDataList()
  },
}
</script>

<style lang='scss' scoped>

</style>